import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'

import { Modal, notification } from 'antd'

import LinkButton from '../link-button'
import { reqResumeQuery } from '../../api'

import { formateDate } from '../../utils/dateUtils'
import storageUtils from "../../utils/storageUtils"


import './index.less'

class Header extends Component {
  state = {
    currentTime: formateDate(Date.now()),
    showIcon: false,
    data: [{},{},{},{},{}]
  }

  componentDidMount() {
    this.getTime()
    this.getData()
  }
  componentWillUnmount() {
    // 清除定时器
    clearInterval(this.intervalId)
    clearInterval(this.intervalId2)
  }

  getTime = () => {
    this.intervalId = setInterval(() => {
      const currentTime = formateDate(Date.now())
      this.setState({
        currentTime
      })
    }, 1000)
  }

  getData = async () => {
    this.intervalId2 = setInterval(async () => {
      const result = await reqResumeQuery()

      if(result.code === 200) {
        if(result.data.length !== this.state.data.length) {
          console.log(result.data)
          console.log(this.state.data)
          this.setState({ data: result.data, showIcon: true})
          notification.success({
            message: <span onClick={this.lookNews}>
                  您有新简历, 请查收
                  <audio src="http://nos.netease.com/ysf/a0531e7a99257e65a29bef978bd23537.mp3" autoPlay></audio>
                </span>,
              top: 60,
              duration: 4
          })
        } else {
          // this.setState({ showIcon: false })
        }
      }
    },6000)
  }

  logout = () => {
    // 显示对话框
    Modal.confirm({
      content: '确定退出吗？',
      onOk: () => {
        storageUtils.removeUser()
        // 跳转到login界面
        this.props.history.replace('/login')
      }
    })
  }

  lookNews = () => {
    this.props.history.push('/home')
    this.setState({
      showIcon: false
    })
  }
  
  render() {
    const { currentTime, showIcon } = this.state
    return (
      <div className="header">
        <div className="header-top">
          <div className="news">

            <a href="http://bole.netease.com/#/app/my/social" style={{marginRight: 20}} target="_blank">我的推荐</a>
            {
              showIcon ? <span onClick={this.lookNews} style={{cursor: 'pointer'}}>
                消息<span className="number"></span>
              </span>:
              <span>消息</span>
            }

            
          </div>

          <span style={{ marginLeft: 20 }}>欢迎, {storageUtils.getUser().username} </span>
          <LinkButton onClick={this.logout}>退出</LinkButton>
        </div>
        <div className="header-bottom">
          <div className="header-bottom-right">
            <span>{currentTime}</span>
          </div>
        </div>
      </div>
    )
  }
}

export default withRouter(Header)
